<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-22 11:06:08
 * @LastEditTime: 2020-03-17 21:35:25
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <style type="text/css">
        .van-uploader__preview-delete {
            position: absolute;
            top: -8px;
            right: -8px;
            color: #969799;
            font-size: 18px;
            background-color: #fff;
            border-radius: 100%;
            height: 20px;
        }

        .van-uploader__preview-image {
            width: 50px;
            height: 50px;
        }

        .van-uploader__upload {
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="企业信息完善" left-arrow @click-left="onClickLeft">
            </van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <van-cell-group>
                        <van-field label="维修厂名称" v-model="formData.ClientName" placeholder="请输入维修厂名称"></van-field>
                        <van-field label="门头名称" v-model="formData.DoorWayName" placeholder="请输入门头名称"></van-field>
                        <van-field label="联系人名称" v-model="formData.LinkName" placeholder="请输入联系人名称"></van-field>
                        <van-field label="联系方式" type="tel" v-model="formData.LinkTelphone" placeholder="请输入联系方式">
                        </van-field>
                        <van-field label="地区" v-model="formData.area" placeholder="请选择省/市/区" readonly
                            @click="selectSSQ">
                            <van-icon slot="right-icon" name="arrow"></van-icon>
                        </van-field>
                        <van-field label="详细地址" v-model="formData.Address" placeholder="请输入详细地址"></van-field>
                        <van-cell title="营业执照(正面)">
                            <div style="padding:10px 0;">
                                <div class="van-uploader">
                                    <div class="van-uploader__wrapper">
                                        <div class="van-uploader__preview">
                                            <div class="van-image van-uploader__preview-image"
                                                style="overflow: hidden; border-radius: 4px;"
                                                v-if="formData.LicenseImg">
                                                <img :src="shoppingMallServerIP + formData.LicenseImg"
                                                    class="van-image__img" style="object-fit: cover;" />
                                            </div>
                                            <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                                @click="formData.LicenseImg = ''" v-if="formData.LicenseImg"></i>
                                        </div>
                                        <div class="van-uploader__upload" v-if="!formData.LicenseImg"
                                            @click="addImage(1)">
                                            <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-cell>
                        <van-cell title="门头照片">
                            <div style="padding:10px 0;">
                                <div class="van-uploader">
                                    <div class="van-uploader__wrapper">
                                        <div class="van-uploader__preview"
                                            v-for="(imgItem,imgItemIndex) in formData.DoorWayImgArray">
                                            <div class="van-image van-uploader__preview-image"
                                                style="overflow: hidden; border-radius: 4px;">
                                                <img :src="shoppingMallServerIP + imgItem" class="van-image__img"
                                                    style="object-fit: cover;" />
                                            </div>
                                            <i class="van-icon van-icon-clear van-uploader__preview-delete"
                                                @click="formData.DoorWayImgArray.splice(imgItemIndex,1)"></i>
                                        </div>
                                        <div class="van-uploader__upload" v-if="formData.DoorWayImgArray.length < 3 "
                                            @click="addImage(2)">
                                            <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </van-cell>
                        <van-field label="邀请码" v-model="formData.RecommendCode" placeholder="请输入邀请码"></van-field>
                    </van-cell-group>
                    <div class="btn-padding">
                        <van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="数据提交中..." type="primary"
                            block @click="confirmForm">提交审核</van-button>
                    </div>

                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>

        <van-popup v-model="showAreaPicker" position="bottom">
            <van-picker show-toolbar title="省市区选择" :columns="areaArray" @change="chanbgeArea"
                @cancel="showAreaPicker = false" @confirm="onAreaConfirm"></van-picker>
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var userInfo = api.pageParam.userInfo;
        var id = api.pageParam.id;
        var form = api.pageParam.form;

        var UIAlbumBrowser = api.require('UIAlbumBrowser');

        var map = api.require('bMap');
        if (api.systemType == 'ios') {
            map.initMapSDK(function (ret) { });
        }

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                formData: {
                    userId: 0,
                    ClientName: '',
                    DoorWayName: '',
                    LinkName: '',
                    LinkTelphone: '',
                    RegionId: 0,
                    RegionPath: '',
                    Address: '',
                    area: '',
                    LicenseImg: '',
                    DoorWayImg1: '',
                    DoorWayImg2: '',
                    DoorWayImg3: '',
                    DoorWayImgArray: [],
                    Latlng:'',
                    RecommendCode:''
                },
                areaArray: [],
                showAreaPicker: false
            },
            created: function () {
                var that = this;
                if (id) {
                    that.formData.userId = id;
                }
                if (userInfo) {
                    that.formData.userId = userInfo.UserId;
                    that.formData.ClientName = userInfo.ClientName;
                    that.formData.DoorWayName = userInfo.DoorWayName;
                    that.formData.LinkName = userInfo.LinkName;
                    that.formData.LinkTelphone = userInfo.LinkTelphone;
                    that.formData.RegionId = userInfo.RegionId;
                    that.formData.RegionPath = userInfo.RegionPath;
                    that.formData.Address = userInfo.Address;
                    that.formData.LicenseImg = userInfo.LicenseImg;
                    that.formData.DoorWayImg1 = userInfo.DoorWayImg1;
                    that.formData.DoorWayImg2 = userInfo.DoorWayImg2;
                    that.formData.DoorWayImg3 = userInfo.DoorWayImg3;
                    that.formData.RecommendCode = userInfo.RecommendCode;
                    if (userInfo.DoorWayImg1) {
                        that.formData.DoorWayImgArray.push(userInfo.DoorWayImg1);
                    }
                    if (userInfo.DoorWayImg2) {
                        that.formData.DoorWayImgArray.push(userInfo.DoorWayImg2);
                    }
                    if (userInfo.DoorWayImg3) {
                        that.formData.DoorWayImgArray.push(userInfo.DoorWayImg3);
                    }

                    that.getDefualtArea();

                }
                that.getProvince();
            },
            methods: {
                getDefualtArea() {
                    var that = this;
                    var texts = '';
                    var fullregionpath = that.formData.RegionPath.split(',');
                    FLD.ajax('sp_getRegion', { parentRegionId: 0 }, function (res) {
                        var row1 = res.ds.filter(function (item) {
                            return item.RegionId == parseInt(fullregionpath[0]);
                        })
                        if (row1.length) {
                            texts += row1[0].RegionName;
                        }

                        FLD.ajax('sp_getRegion', { parentRegionId: row1[0].RegionId }, function (res) {
                            var row2 = res.ds.filter(function (item) {
                                return item.RegionId == parseInt(fullregionpath[1]);
                            })
                            if (row2.length) {
                                texts += row2[0].RegionName;
                            }
                            FLD.ajax('sp_getRegion', { parentRegionId: row2[0].RegionId }, function (res) {
                                var row3 = res.ds.filter(function (item) {
                                    return item.RegionId == parseInt(fullregionpath[2]);
                                })
                                if (row3.length) {
                                    texts += row3[0].RegionName;
                                }
                                that.formData.area = texts;

                            })

                        })

                    })
                },
                addImage(index) {
                    var that = this;
                    var isMulti = 0;
                    if (index == 1) {
                        isMulti = 1;
                    } else {
                        isMulti = 5 - that.formData.DoorWayImgArray.length
                    }
                    UIAlbumBrowser.imagePicker({
                        max: isMulti,
                        styles: {
                            nav: {
                                bg: '#efefef',
                                cancelColor: '#000',
                                nextStepColor: '#000',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                // UIAlbumBrowser.closePicker();
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        FLD.uploadFile_shop(ret.path, function (path) {
                                            console.log(path)
                                            if (index == 1) {
                                                that.formData.LicenseImg = path;
                                            } else {
                                                that.formData.DoorWayImgArray.push(path);
                                            }
                                        })

                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                var repeatImg = function (i) {
                                    if (i == imgLists.length) {
                                        return;
                                    }
                                    UIAlbumBrowser.transPath({
                                        path: imgLists[i].path
                                    }, function (ret, err) {
                                        if (ret) {
                                            FLD.uploadFile_shop(ret.path, function (path) {
                                                if (index == 1) {
                                                    that.formData.LicenseImg = path;
                                                } else {
                                                    that.formData.DoorWayImgArray.push(path);
                                                }
                                                i++;
                                                repeatImg(i);
                                            })

                                        }
                                    });
                                }
                                repeatImg(0)

                            }

                        }
                    });
                },
                getProvince() {
                    var that = this;
                    FLD.ajax('sp_getRegion', { parentRegionId: 0 }, function (res) {
                        for (var i in res.ds) {
                            that.areaArray.push({
                                id: res.ds[i].RegionId,
                                text: res.ds[i].RegionName
                            })
                        }
                        that.getCity(that.areaArray[0]);

                    })
                },
                getCity(row, picker, indexArray) {
                    var that = this;
                    FLD.ajax('sp_getRegion', { parentRegionId: row.id }, function (res) {
                        var childrenArray = []
                        for (var i in res.ds) {
                            childrenArray.push({
                                id: res.ds[i].RegionId,
                                text: res.ds[i].RegionName
                            })
                        }

                        if (picker) {
                            picker.setColumnValues(1, childrenArray);
                            that.areaArray[indexArray[0]].children = childrenArray;
                            that.getArea(childrenArray[0], picker);
                        } else {
                            that.$set(row, 'children', childrenArray);
                            that.getArea(row.children[0]);
                        }

                    })
                },
                getArea(row, picker, indexArray) {
                    var that = this;
                    FLD.ajax('sp_getRegion', { parentRegionId: row.id }, function (res) {
                        var childrenArray = []
                        for (var i in res.ds) {
                            childrenArray.push({
                                id: res.ds[i].RegionId,
                                text: res.ds[i].RegionName
                            })
                        }

                        if (picker) {
                            picker.setColumnValues(2, childrenArray);
                            that.areaArray[indexArray[0]].children[indexArray[1]].children = childrenArray;

                        } else {
                            that.$set(row, 'children', childrenArray);
                        }
                    })
                },
                chanbgeArea(picker, values, index) {
                    var that = this;
                    var indexArray = picker.getIndexes();
                    if (index == 0) {
                        that.getCity(that.areaArray[indexArray[0]], picker, indexArray);
                    } else if (index == 1) {
                        that.getArea(that.areaArray[indexArray[0]].children[indexArray[1]], picker, indexArray);
                    }
                },
                onAreaConfirm(values, indexArray) {
                    var that = this;
                    var area = [];
                    var fullregionpath = [];
                    if (that.areaArray[indexArray[0]].children[indexArray[1]].children && that.areaArray[indexArray[0]].children[indexArray[1]].children.length) {
                        that.formData.RegionId = that.areaArray[indexArray[0]].children[indexArray[1]].children[indexArray[2]].id;
                        fullregionpath.push(that.areaArray[indexArray[0]].id);
                        fullregionpath.push(that.areaArray[indexArray[0]].children[indexArray[1]].id);
                        fullregionpath.push(that.areaArray[indexArray[0]].children[indexArray[1]].children[indexArray[2]].id);

                        area.push(that.areaArray[indexArray[0]].text);
                        area.push(that.areaArray[indexArray[0]].children[indexArray[1]].text);
                        area.push(that.areaArray[indexArray[0]].children[indexArray[1]].children[indexArray[2]].text);
                    } else {
                        that.formData.RegionId = that.areaArray[indexArray[0]].children[indexArray[1]].id;
                        fullregionpath.push(that.areaArray[indexArray[0]].id);
                        fullregionpath.push(that.areaArray[indexArray[0]].children[indexArray[1]].id);

                        area.push(that.areaArray[indexArray[0]].text);
                        area.push(that.areaArray[indexArray[0]].children[indexArray[1]].text);
                    }
                    that.formData.RegionPath = fullregionpath.join();
                    that.formData.area = area.join('');
                    that.showAreaPicker = false;

                },
                selectSSQ() {
                    var that = this;
                    that.showAreaPicker = true;
                },
                confirmForm() {
                    var that = this;

                    if (!that.formData.ClientName) {
                        layer.open({
                            content: '请填写维修厂名称',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.DoorWayName) {
                        layer.open({
                            content: '请填写门头名称',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    
                    if (!that.formData.LinkName) {
                        layer.open({
                            content: '请填写联系人名称',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.LinkTelphone) {
                        layer.open({
                            content: '请填写联系方式',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.RegionId || !that.formData.Address) {
                        layer.open({
                            content: '请填写门店地址',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.LicenseImg) {
                        layer.open({
                            content: '请上传营业执照',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }
                    if (!that.formData.DoorWayImgArray.length) {
                        layer.open({
                            content: '请上传至少一张门头照片',
                            skin: 'msg',
                            time: 2
                        });
                        return false;
                    }

                    that.$dialog.confirm({
                        title: '提示',
                        message: '是否提交当前企业信息?'
                    }).then(() => {


                        map.getLocation({
                            accuracy: '10m',
                            autoStop: true
                        }, function (ret, err) {
                            that.formData.Latlng = ret.lon + ',' + ret.lat;
                            if (that.formData.DoorWayImgArray.length == 1) {
                                that.formData.DoorWayImg1 = that.formData.DoorWayImgArray[0];
                            }
                            if (that.formData.DoorWayImgArray.length == 2) {
                                that.formData.DoorWayImg1 = that.formData.DoorWayImgArray[0];
                                that.formData.DoorWayImg2 = that.formData.DoorWayImgArray[1];
                            }
                            if (that.formData.DoorWayImgArray.length == 3) {
                                that.formData.DoorWayImg1 = that.formData.DoorWayImgArray[0];
                                that.formData.DoorWayImg2 = that.formData.DoorWayImgArray[1];
                                that.formData.DoorWayImg3 = that.formData.DoorWayImgArray[2];
                            }
                            FLD.ajax('sp_perfectClientInfo', that.formData, function (res) {
                                layer.open({
                                    content: '企业信息提交成功,请耐心等待审核',
                                    skin: 'msg',
                                    time: 2,
                                    end: function () {
                                        if (form == 'login') {
                                            api.closeWin();
                                        } else {
                                            api.closeToWin({
                                                name: 'login'
                                            });
                                        }

                                    }
                                });
                            })
                        })




                    }).catch(() => {

                    });


                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>